<template>
  <el-popover placement="top" width="250" trigger="click" @hide="popClose">
    <draggable class="list-group" tag="div" v-model="showColumn" v-bind="{
      animation: 200,
      group: 'description',
      disabled: false,
      ghostClass: 'ghost'
    }">
      <div class="list-group-item" v-for="element in showColumn" :key="element.key"
           style="display: flex; flex-direction: row;justify-content: space-between;align-items: center;">
        <el-checkbox class="checkbox" v-model="element.visible">{{ element.name }}</el-checkbox>
        <i class="el-icon-sort" style="margin-right: 20px;"></i>
      </div>
    </draggable>
    <el-button slot="reference" :size="size" type="primary">列设置</el-button>
  </el-popover>
</template>
<script>
import Draggable from 'vuedraggable'
export default {
  name: 'ColumnControl',
  components: {
    Draggable
  },
  data() {
    return {
      showColumn: []
    }
  },
  props: {
    size: {
      type: String,
      default: 'mini',
    },
    value: {
      type: Array,
      default: []
    },
  },
  watch: {
    value: {
      handler: function (val) {
        this.showColumn = val
      },
      immediate: true,
    },
    showColumn: {
      handler(val) {
        this.$emit('input', val)
      }
    },
  },
  methods: {
    popClose() {
      this.$emit('popClose', this.showColumn)
    }
  }
}
</script>
<style lang="scss" scoped>
.ghost {
  opacity: 0.5;
}

.list-group {
  min-height: 20px;
  list-style: none;
  max-height: 400px;
  overflow-y: auto;
}

.list-group-item {
  cursor: move;
  height: 25px;
  line-height: 25px;
}

.checkbox {
  margin-left: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

>>>.el-checkbox__label {
  line-height: 14px;
  padding-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 160px;
}
</style>
